<template>
  <div class="clock">
    <div class="date">{{ date }}</div>
    <div class="time">{{ time }}</div>
  </div>
</template>

<script>
export default {
  name: "Clock",
  data() {
    return {
      date: '',
      time: '',
    }
  },
  mounted() {
    this.getdate();
    this.timer = setInterval(() => {
      this.getdate();
    }, 1000)
  },
  methods: {
    getdate: function () {
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let week = weeks[time.getDay()];
      this.getTime();
      this.date = year + '/' + month + '/' + day + " " + week;
    },
    getTime: function () {
      let time = new Date();
      let hour = time.getHours();
      let minutes = time.getMinutes();
      let second = time.getSeconds();
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      if (second < 10) {
        second = '0' + second
      }
      this.time = hour + "：" + minutes + "：" + second
    },
  }
}
</script>

<style scoped>
.clock {
  border: 1px solid #dddddd;
  padding: 10px;
  margin: 10px;
  height: 115px;
  text-align: center;
}

.date {
  padding: 5px;
  font-size: 20px;
}

.time {
  padding: 10px;
  font-size: 36px;
}
</style>